Add hover effects to quizzes list category cards#945
Open
syeedazoyatabassum wants to merge 2 commits intoalphaonelabs:mainfrom
Open
Add hover effects to quizzes list category cards#945syeedazoyatabassum wants to merge 2 commits intoalphaonelabs:mainfrom
syeedazoyatabassum wants to merge 2 commits intoalphaonelabs:mainfrom
Conversation
Contributor
WalkthroughAdds Tailwind CSS transition and hover classes to the three quiz category cards (My Quizzes, Shared With Me, Public Quizzes) in the quiz list template; changes are purely visual (hover lift and shadow) with no data or behavior modifications. Changes
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~3 minutes Possibly related issues
Suggested labels
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Tip Try Coding Plans. Let us write the prompt for your AI agent so you can ship faster (with fewer bugs). Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@web/templates/web/quiz/quiz_list.html`:
- Line 27: Replace the overly broad Tailwind utility "transition-all" with the
narrower "transition" on the quiz card elements so only transform and box-shadow
are animated; specifically update the divs that contain the class string
"bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-all
duration-300 hover:shadow-2xl hover:-translate-y-1" (and the analogous card
class occurrences) to use "transition" instead of "transition-all" (also apply
the same change to the other two card instances currently using transition-all).
- Line 27: The hover translate animation uses plain "hover:-translate-y-1" which
ignores users' prefers-reduced-motion; update the Tailwind utility to use the
motion-safe variant ("motion-safe:hover:-translate-y-1") wherever it appears
(the card class string at the line shown and the other occurrences noted around
lines 75 and 116) so the translate is only applied when motion is allowed while
leaving the hover shadow ("hover:shadow-2xl") unchanged.
Author
|
Fixed - replaced transition-all with transition and added motion-safe: prefix to hover:-translate-y-1 on all three cards for better performance and accessibility. |
Contributor
👀 Peer Review RequiredHi @syeedazoyatabassum! This pull request does not yet have a peer review. Before this PR can be merged, please request a review from one of your peers:
Thank you for contributing! 🎉 |
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@web/templates/web/quiz/quiz_list.html`:
- Line 27: The card container currently only applies hover-only lift/shadow
styles via classes on the div (e.g., the class starting with "bg-white
dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition duration-300
hover:shadow-2xl motion-safe:hover:-translate-y-1"); update these containers to
include focus-within variants so keyboard focus inside the card yields the same
visual cue (add "focus-within:shadow-2xl" and
"motion-safe:focus-within:-translate-y-1" or equivalent focus-within classes
alongside the existing hover classes), and make the same change for the other
card instances mentioned (the similar divs at the other occurrences). Ensure the
interactive children (links/buttons) remain tabbable so focus-within can
trigger.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Related issues
Fixes #943
Summary
Added hover interaction effects to the three quiz category cards (My Quizzes, Shared With Me, Public Quizzes) on the quiz list page. Each card now smoothly lifts up and gains a deeper shadow when hovered, providing clear visual feedback that improves the user experience.
Before & After
shadow-lg(static)shadow-lg→shadow-2xlon hover-translate-y-1) on hoverScreenshots
The attached video shows the behavior after the fix. To see how it was before the fix, please refer to the recording in the issue #943
fix01.mov
Summary by CodeRabbit